import React, { Ref } from "react";
import { Card, Row, Col, message, Modal, Form, Table, Button, Input } from "antd";
import { FormComponentProps } from "antd/lib/form/Form"; //获取Form表单的interface
import { FormItemProps } from "antd/lib/form/FormItem";
import { ColumnProps, SortOrder } from "antd/es/table";
import { PaginationConfig } from "antd/es/pagination/Pagination";
import { TableRowSelection, SorterResult } from "antd/es/table/interface";
import AJAX, { AJAXResponseConfig, AJAXRequestConfig } from "../../ajax/ajaxServer";
import { formatSex, formatInterest } from "../../utils/tools";
import { getPaginationConfig } from "../../utils/utils";
import { ResponseResult, UserInfo } from "../../utils/interface";
import "./index.less";

interface IProps {}
interface IStates {
	isOpenModal: boolean;
}

interface User {
	[propName: string]: any;
}

const FormItem = Form.Item;

const formItemLayout: FormItemProps = {
	labelCol: {
		xs: {
			span: 24
		},
		sm: {
			span: 2
		}
	},
	wrapperCol: {
		xs: {
			span: 24
		},
		sm: {
			span: 4
		}
	}
};

const SeachForm = Form.create()(
	class NormalForm extends React.Component<FormComponentProps> {
		getFormValue = () => {
			const value = this.props.form.getFieldsValue();
			console.log(value);
			for (let i in value) {
				console.log(value[i]);
			}
			// this.props.form.validateFields((err, values) => {
			// 	console.log(err, values);
			// });
			message.info(<span style={{ fontWeight: 600, color: "red" }}>{`${value}`}</span>);
		};
		render() {
			const { getFieldDecorator } = this.props.form;

			return (
				<Form>
					<FormItem label="测试组件" {...formItemLayout}>
						{getFieldDecorator("test", {
							rules: [
								{
									required: true,
									message: "用户名不能为空"
								},
								{
									min: 5,
									max: 10,
									message: "长度不在范围内"
								},
								{
									pattern: /^\w+$/g,
									message: "用户名必须为字母或数字"
								}
							],
							initialValue: "默认值是0"
						})(<Input type="text" placeholder="测试组件" />)}
					</FormItem>
					<FormItem label="测试组件" {...formItemLayout}>
						{getFieldDecorator("test1", {
							initialValue: "默认值是1"
						})(<Input type="text" placeholder="测试组件1" />)}
					</FormItem>
					<FormItem label="button" {...formItemLayout}>
						<Button onClick={this.getFormValue}>获取数据</Button>
					</FormItem>
				</Form>
			);
		}
	}
);

const SeachForm2 = Form.create()(
	class NormalForm extends React.Component<FormComponentProps> {
		getFormValue = () => {
			const value = this.props.form.getFieldsValue();
			console.log(value);
			for (let i in value) {
				console.log(value[i]);
			}
		};
		render() {
			const { getFieldDecorator } = this.props.form;

			return (
				<Form>
					<FormItem label="ref测试1" {...formItemLayout}>
						{getFieldDecorator("test1", {
							initialValue: "默认值是2"
						})(<Input type="text" placeholder="测试组件2" />)}
					</FormItem>
					<FormItem label="ref测试2" {...formItemLayout}>
						{getFieldDecorator("test2", {
							initialValue: "默认值是2"
						})(<Input type="text" placeholder="测试组件2" />)}
					</FormItem>
					<FormItem label="button" {...formItemLayout}>
						<Button onClick={this.getFormValue}>获取数据</Button>
					</FormItem>
				</Form>
			);
		}
	}
);

const SeachForm3 = Form.create<FormComponentProps>()(
	class NormalForm3 extends React.Component<FormComponentProps, IStates> {
		constructor(props: FormComponentProps, state: IStates) {
			super(props, state);
			this.state = {
				isOpenModal: false
			};
		}

		getFormValue = () => {
			const value = this.props.form.getFieldsValue();
			console.log(value);
			for (let i in value) {
				console.log(value[i]);
			}
		};

		render() {
			const { getFieldDecorator } = this.props.form;

			return (
				<div>
					<Form>
						<FormItem label="测试组件3" {...formItemLayout}>
							{getFieldDecorator("test3", {
								initialValue: "默认值是3"
							})(<Input type="text" placeholder="测试组件3" />)}
						</FormItem>
						<FormItem label="button" {...formItemLayout}>
							<Button onClick={this.getFormValue}>获取数据</Button>
						</FormItem>
						<FormItem label="button" {...formItemLayout}>
							<Button
								onClick={() => {
									this.setState({
										isOpenModal: true
									});
								}}
							>
								SeachForm3 打开弹框
							</Button>
						</FormItem>
					</Form>
					<Modal
						visible={this.state.isOpenModal}
						width={600}
						title={"SeachForm3 内部表单"}
						onCancel={() => {
							this.setState({
								isOpenModal: !this.state.isOpenModal
							});
						}}
					>
						<Form>
							<FormItem label="内部表单" {...formItemLayout}>
								{getFieldDecorator("innerText", {
									initialValue: "默认值是3"
								})(<Input type="text" placeholder="测试组件3" />)}
							</FormItem>
						</Form>
					</Modal>
				</div>
			);
		}
	}
);

class NormalFormPage extends React.Component<IProps, IStates> {
	paramConfig1: any;
	seachForm2: any;

	constructor(props: IProps, state: IStates) {
		super(props, state);
		this.state = {
			isOpenModal: false
		};
	}

	componentDidMount() {
		// this.requestStandardDatas();
	}

	render() {
		const tableColumns: ColumnProps<User>[] = [
			{
				title: "Taa",
				dataIndex: "aa",
				key: "aa"
			},
			{
				title: "Tbb",
				dataIndex: "bb",
				key: "bb"
			},
			{
				title: "Tcc",
				dataIndex: "cc.cc1",
				key: "cc"
			}
		];

		const tableData: User[] = [
			{
				aa: "aa1",
				bb: "bb1",
				cc: {
					cc1: "cc1"
				}
			},
			{
				aa: "aa2",
				bb: "bb2",
				cc: {
					cc1: "cc2"
				}
			},
			{
				aa: "aa3",
				bb: "bb3",
				cc: {
					cc1: "cc3"
				}
			}
		];
		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>Test Form</h1>
				</div>
				<Card title="表单组件的测试" className="button-wrap">
					<Row>
						<Col span={24}>
							<SeachForm></SeachForm>
						</Col>
					</Row>
				</Card>
				<Card title={`SeachForm2 测试ref功能`}>
					<Row>
						<Col span={24}>
							<SeachForm2 wrappedComponentRef={(seachForm2: any) => (this.seachForm2 = seachForm2)}></SeachForm2>
						</Col>
					</Row>
				</Card>
				<Card title={`SeachForm3 测试组件中弹框的功能`}>
					<Row>
						<Col span={24}>
							<SeachForm3></SeachForm3>
						</Col>
					</Row>
				</Card>
				<Card title={`Test Form 页面中button的作用`}>
					<Row>
						<Col span={24}>
							<Button
								onClick={() => {
									// props.form.getFieldsValue;
									const aa = this.seachForm2.props.form.getFieldsValue();
									console.log(aa);
									this.setState({
										isOpenModal: true
									});
								}}
							>
								Page Button
							</Button>
						</Col>
					</Row>
				</Card>
				<Modal
					title={`这里调用的是SeachForm3`}
					visible={this.state.isOpenModal}
					width={600}
					onCancel={() => {
						this.setState({
							isOpenModal: !this.state.isOpenModal
						});
					}}
				>
					<SeachForm3></SeachForm3>
				</Modal>
			</div>
		);
	}
}

export default NormalFormPage;
